<template>
    <div class="right-bg">
        <div class="xx-stat-row">
            <div class="xxtj">
                <titleRow title="学习资料统计" />
                <div class="xxtj-stat">
                    <div v-for="(item,index) in xxtjList" :key="index" class="xxtj-stat-row">
                        <div class="label-icon">
                            <img :src="item.icon" alt="">
                        </div>
                        <div class="xxtj-row1">
                            <div class="row-text">{{item.name}}</div>
                            <div class="row-num">{{item.num}}</div>
                        </div>
                        <div class="xxtj-row2">
                            <div class="item-center m-b-5">
                                <img src="../../assets/dp2/wz-icon.png" alt="">
                                <div class="row2-text">文章</div>
                                <div class="row2-num">{{item.wzNum}}</div>
                            </div>
                            <div class="item-center">
                                <img src="../../assets/dp2/sp-icon.png" alt="">
                                <div class="row2-text">视频</div>
                                <div class="row2-num">{{item.spNum}}</div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            <div class="xxtj">
                <titleRow title="学习情况分析" />
                <div id="xxqkStat">

                </div>
            </div>
        </div>
        <div class="flex">
            <div class="hdtj-stat">
                <titleRow title="组织活动统计" />

                <div class="hdtj-bg">
                    <div class="gear">
                        <div class="gear-name">党委</div>
                        <img class="gear-big" src="../../assets/dp2/gear-big.png" alt="">
                        <img class="gear-middle" src="../../assets/dp2/gear-middle.png" alt="">
                        <img class="gear-small" src="../../assets/dp2/gear-small.png" alt="">
                    </div>
                    <div class="hdtj-row color1">
                        党总支部
                        <div class="hdtj-num-wrapper">
                            <img src="../../assets/dp2/hdtj-num-bg.png" alt="">
                        </div>
                        <div class="hdtj-num">31</div>
                    </div>
                    <div class="hdtj-row color2">
                        党支部
                        <div class="hdtj-num-wrapper">
                            <img src="../../assets/dp2/hdtj-num-bg.png" alt="">
                        </div>
                        <div class="hdtj-num">590</div>
                    </div>
                    <div class="hdtj-row color3">
                        联合党支部
                        <div class="hdtj-num-wrapper">
                            <img src="../../assets/dp2/hdtj-num-bg.png" alt="">
                        </div>
                        <div class="hdtj-num">31</div>
                    </div>
                </div>

            </div>
            <div class="hdtj-stat">
                <titleRow title="组织活动类型分析" />
                <div id="hdlxStat">

                </div>
            </div>
        </div>
        <div class="flex">
            <div class="hltj-stat">
                <titleRow title="党组织活力指数分析" />
                <div class="ju-con">
                    <div class="zs-bg">
                        <div class="zs-ab">
                            <div class="zs-text">活力总数</div>
                            <div class="zs-num">{{currentNum1}}</div>
                        </div>
                        <div class="zs-arrow">
                            <div class="zs-arrow-num">{{currentNum2}}</div>
                            <img src="../../assets/dp2/hlzs-bg2.png" alt="">
                        </div>
                    </div>
                    <ul class="zz-ul">
                        <li :style="item.style" class="zz-list" v-for="(item,index) in dyhlList" :key="index">
                            {{item.name}}
                        </li>
                        <li class="current-list">{{currentName}}</li>
                    </ul>
                </div>
            </div>
            <div class="hltj-stat">
                <titleRow title="党员党龄活力指数" />
                <div class="dydl-row">
                    <div class="relative">
                        <img class="dp-img" src="../../assets/dp2/dydl-dp.png" alt="">
                        <img class="dydl-widget" src="../../assets/dp2/dydl-widget.png" alt="">
                    </div>
                    <ul class="dydl-bg">
                        <li :class="getDyDlBg(index)" class = "dydl-li" v-for="(item,index) in dydlList" :key = "index">
                            <span>{{item.agegroup}}</span>
                            <span class="dydl-num">【{{item.avgscore}}】</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
import titleRow from "./titleRow";
import lxyzIcon from "../../assets/dp2/xxtj-lxyz.png";
import shykIcon from "../../assets/dp2/xxtj-shyk.png";
import { xxqkOption, hdlxOption } from "./statConfig";
import Pubsub from "../../utils/pubsub";


import {getDlhlzs} from "../../config/api";

const hdStyle = {
    1: { top: "0px", opacity: 0.5 },
    2: { top: "31px", opacity: 0.7 },
    3: { top: "62px", opacity: 0.85 },
    4: { top: "95px", opacity: 0.5 },
    5: { top: "135px", opacity: 0.85 },
    6: { top: "166px", opacity: 0.7 },
    7: { top: "195px", opacity: 0.5 }
};
export default {
    components: {
        titleRow
    },
    data() {
        return {
            commonRequest:{},
            xxtjList: [
                {
                    name: "不忘初心牢记使命",
                    num: 63,
                    icon: lxyzIcon,
                    spNum: 4,
                    wzNum: 59
                },
                {
                    name: "三会一课",
                    num: 298,
                    icon: shykIcon,
                    spNum: 12,
                    wzNum: 286
                }
            ],
            dyhlList: [
                { name: "机关", type: 1, style: hdStyle[1],num1:121,num2:178 },
                { name: "乡镇", type: 2, style: hdStyle[2],num1:122,num2:146 },
                { name: "国有经济控制", type: 3, style: hdStyle[3],num1:123,num2:156 },
                { name: "事业单位", type: 4, style: hdStyle[4],num1:124,num2:185 },
                { name: "建制村", type: 5, style: hdStyle[5],num1:125,num2:112 },
                { name: "非公有经济控制", type: 6, style: hdStyle[6],num1:126,num2:125 },
                { name: "社会组织", type: 7, style: hdStyle[7],num1:127,num2:98 }
            ],
            currentName: "事业单位",
            currentNum1: "456",
            currentNum2: "123",
            dydlList:[//党员党龄列表
                {agegroup:"5年以下",avgscore:0},
                {agegroup:"5至10年",avgscore:0},
                {agegroup:"10至15年",avgscore:0},
                {agegroup:"15至20年",avgscore:0},
                {agegroup:"20年以上",avgscore:0},
            ]
        };
    },
    mounted() {
        this.initStat();
        this.getData();
        this.pubsub_token1 = Pubsub.subscribe("refreshDp2Data", (t, args) => {
            let { type } = args;
            this.commonRequest.type = type;
            this.getData();
        });
        this.timer = setInterval(() => {
            this.setScrollList();
        }, 3000);
    },
    destroyed() {
        this.timer && clearInterval(this.timer);
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);

    },
    methods: {
        getData(){
            this.getDlhlzsData();
        },
        /**
         * 获取党龄活力指数
         */
        getDlhlzsData(){
            getDlhlzs(this.commonRequest).then((result = {})=>{
                let data = result.data || [];
                this.dydlList = data;
            })
        },
        /**
         * 初始化echarts
         */
        initStat() {
            this.myChart1 = echarts.init(document.getElementById("xxqkStat"));
            this.myChart2 = echarts.init(document.getElementById("hdlxStat"));
            this.myChart1.setOption(xxqkOption());
            this.myChart2.setOption(hdlxOption());
        },
        /**
         * 设置机关列表滚动
         */
        setScrollList() {
            this.dyhlList.map(item => {
                if (item.type === 7) {
                    item.type = 1;
                } else {
                    ++item.type;
                }
                if (item.type == 4) {
                    this.currentName = item.name;
                    // this.currentNum1 = item.num1;
                    this.currentNum2 = item.num2;
                }
                item.style = hdStyle[item.type];
            });
        },
        /**
         * 获取党员党龄背景色
         */
        getDyDlBg(index){
            return `color${index}`;
        }
    }
};
</script>

<style lang="scss" scoped>
.right-bg {
    width: 936px;
    .xx-stat-row {
        display: flex;
        padding-top: 32px;
    }
    .xxtj {
        width: 468px;
    }
    .xxtj-stat {
        box-sizing: border-box;
        padding-left: 50px;
    }
    .xxtj-stat-row {
        height: 90px;
        width: 363px;
        display: flex;
        background: url("../../assets/dp2/xxtj-bg.png");
        .label-icon {
            width: 79px;
            height: 85px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        &:first-child {
            margin: 18px 0 22px 0;
        }
        &:last-child {
            margin-bottom: 28px;
        }
    }
    .xxtj-row1 {
        width: 106px;
        height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        padding-left: 15px;
        .row-text{
            width:60px;
        }
    }
    .xxtj-row2 {
        width: 177px;
        height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        padding-left: 24px;
    }
    .row-text {
        color: #ffd2d2;
        margin-bottom: 5px;
    }
    .row-num {
        color: #fff100;
        font-size: 22px;
    }
    .row2-text {
        color: #ffd2d2;
        margin: 0 20px 0 8px;
    }
    .row2-num {
        color: #fff100;
        font-size: 18px;
    }
}
#xxqkStat {
    height: 210px;
    width: 420px;
    margin-top: 10px;
}
.hdtj-stat {
    width: 468px;
    .hdtj-bg {
        height: 169px;
        width: 468px;
        position: relative;
        margin-top: 10px;
        background: url("../../assets/dp2/hdtj-bg.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 35px;
        box-sizing: border-box;
        font-size: 16px;
    }
    .hdtj-row {
        height: 80px;
        width: 100px;
        color: #fff;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        &.color1 {
            background: #d92016;
        }
        &.color2 {
            background: #ff4e00;
        }
        &.color3 {
            background: #ff6d37;
        }
    }
    .hdtj-num-wrapper {
        position: absolute;
        top: 68px;
    }
    .hdtj-num {
        position: absolute;
        height: 45px;
        width: 94px;
        color: #fff100;
        font-size: 22px;
        bottom: -95px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.gear {
    position: absolute;
    left: 0;
    height: 169px;
    width: 150px;
    display: flex;
    align-items: center;
    left: 10px;
    .gear-big {
        width: 108px;
        animation: move 60s linear infinite;
    }
    .gear-middle {
        position: absolute;
        left: 83px;
        z-index: 99;
        top: 18px;
        animation: move 30s linear infinite;
    }
    .gear-small {
        position: absolute;
        width: 50px;
        left: 82px;
        z-index: 99;
        bottom: 36px;
        animation: move 10s linear infinite;
    }
    .gear-name {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 108px;
        width: 108px;
        font-size: 20px;
        color: #fff100;
    }
}
@keyframes move {
    to {
        transform: rotate(360deg);
    }
    from {
        transform: rotate(0deg);
    }
}
#hdlxStat {
    width: 400px;
    height: 220px;
}
.hltj-stat {
    margin-top: 30px;
    width: 468px;
    &:last-child {
        margin-left: -20px;
    }
    .zs-bg {
        height: 202px;
        width: 197px;
        background: url("../../assets/dp2/hlzs-bg1.png") no-repeat;
        margin-top: 25px;
        position: relative;
        .zs-ab {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .zs-text {
                font-size: 16px;
                color: #fff2f2;
                margin-top: 20px;
            }
            .zs-num {
                color: #fff100;
                font-size: 30px;
            }
        }
    }
    .zs-arrow {
        position: absolute;
        top: 50%;
        margin-top: -15px;
        right: -75px;
        .zs-arrow-num {
            width: 52px;
            height: 28px;
            background-color: rgba(255, 234, 3, 0.2);
            border-radius: 3px;
            position: absolute;
            color: #fff100;
            top: -23px;
            left: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
    }
}
.ju-con {
    display: flex;
    justify-content: space-between;
    margin-left: -30px;
}
.zz-ul {
    position: relative;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 13px;
    margin-right: 30px;
    .zz-list {
        position: absolute;
        height: 26px;
        width: 142px;
        background: url("../../assets/dp2/default-zz.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease-in-out;
    }
    .current-list {
        position: absolute;
        height: 32px;
        margin-top: 4px;
        width: 188px;
        background: url("../../assets/dp2/active-zz.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff100;
        font-size: 18px;
    }
}
.dydl-row {
    display: flex;
    // margin-top: 20px;
    .dydl-bg {
        height: 208px;
        width: 230px;
        margin-top: 30px;
        margin-left: 30px;
        background: url("../../assets/dp2/dydl-bg.png") no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding:15px 10px;
    }
    .dp-img{
        margin-top: 10px;
    }
    .dydl-widget {
        position: absolute;
        top: 1px;
        right: -73px;
    }
    .dydl-li{
        height:36px;
        width: 208px;
        box-sizing: border-box;
        padding:0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .dydl-num{
            color:#fff100;
            font-size: 16px;
        }
        &.color0{
            background-color: #ffa489;
        }
        &.color1{
            background-color: #ff8e6c;
        }
        &.color2{
            background-color: #ff6d37;
        }
        &.color3{
            background-color: #ff4e00;
        }
        &.color4{
            background-color: #d92016;
        }
    }
}
</style>